<script setup>
import { ref } from 'vue';
import MapViewer from './MapViewer/index.vue';
import MapEditor from './MapEditor/index.vue';
import MapFormer from './MapFormer/index.vue';
import MapStages from './MapStages/index.vue';
import { MapData } from './MapData';
import demoData from './demo.data';

const editorRef = ref(null);
const stagesRef = ref(null);

const land = ref(null);
const mapdata = ref(new MapData(demoData));

/** @事件 点击土地 */
function onStage({ isTop, isLeft, stage }) {
  if (stage) {
    land.value.style.display = 'block';
    land.value.style.top = isTop ? 'auto' : '20px';
    land.value.style.bottom = isTop ? '20px' : 'auto';
    land.value.style.left = isLeft ? 'auto' : '30px';
    land.value.style.right = isLeft ? '30px' : 'auto';
    land.value.innerHTML = `<span>我是土地${stage.code}号</span>`;
  } else {
    land.value.style.display = 'none';
  }
}

/** @事件 绘制地图 */
function onDrawing(done) {
  editorRef.value.downing(done);
}
</script>

<template>
  <div class="LandEditor">
    <div class="LandEditor-body">
      <div class="LandEditor-viewer">
        <div class="LandEditor-viewer--body">
          <MapViewer :mapdata="mapdata" @stage="onStage"/>
          <div class="LandEditor-viewer--stage" ref="land">我是土地?号</div>
        </div>
        <div class="LandEditor-viewer--name">模拟预览</div>
      </div>
      <div class="LandEditor-editor">
        <MapEditor ref="editorRef" :mapdata="mapdata"/>
      </div>
    </div>
    <div class="LandEditor-lands">
      <MapFormer :mapdata="mapdata"/>
      <MapStages ref="stagesRef" :mapdata="mapdata" @drawing="onDrawing"/>
    </div>
  </div>
</template>

<style scoped>
.LandEditor {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 16px;
  box-sizing: border-box;
  background-color: #f5f5f5;
}
.LandEditor-body {
  flex-shrink: 0;
  height: 528px;
  display: flex;
  user-select: none;
}
.LandEditor-editor {
  flex: 1;
  border-radius: 6px;
  overflow: hidden;
}
.LandEditor-viewer {
  width: 320px;
  height: 100%;
  margin-right: 10px;
  border-radius: 6px;
  padding: 20px 18px;
  padding-top: 28px;
  box-sizing: border-box;
  background-color: #5c8d61;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}
.LandEditor-viewer--body {
  flex: 1;
  border-radius: 3px;
  border: 1px solid #87c38e;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}
.LandEditor-viewer--name {
  height: 20px;
  color: #eafbec;
  margin-top: 12px;
  margin-bottom: 8px;
  text-align: center;
  flex-shrink: 0;
  font-size: 18px;
}
.LandEditor-viewer--stage {
  display: none;
  position: absolute;
  width: 80px;
  height: 180px;
  font-size: 32px;
  border-radius: 8px;
  text-align: center;
  user-select: none;
  background-color: #21ff8e;
  color: #178c00;
  top: 20px;
  left: 30px;
}
.LandEditor-lands {
  flex: 1;
  margin-top: 10px;
  padding: 12px 16px;
  box-sizing: border-box;
  border-radius: 6px;
  background-color: white;
  overflow: hidden;
  display: flex;
}
</style>
